<template>
  <div class="madaha">
    <el-table :data="tableData" style="width: 100%" max-height="400">
      <el-table-column prop="date" label="序号" width="180" type="index">
      </el-table-column>
      <!-- <el-table-column prop="category.name" label="名字"> </el-table-column> -->
      <el-table-column prop="title" label="标题" width="180"> </el-table-column>
      <el-table-column prop="titleImage" label="标题图片">
        <template slot-scope="scope">
          <img :src="scope.row.titleImage" width="30px" height="30px" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="tags" label="标签">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.tags" :key="index">
            {{item.name}}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2, 20, 30, 40]"
        :page-size="pages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: null, //表格数据
      total: null, //共多少条数据
      pages:null,//共几页
      pageSize:2,//每页条数
      pageNumber:1,//当前页数
    };
  },
  methods: {
    // 每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getData()
    },
    //当前第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber=val
      this.getData()
    },
    //初始化表格
    getData() {
      this.$axios({
        method: "post",
        url: "http://47.104.167.34:9110/api/index/article/list",
        data: {
          current: this.pageNumber,
          size: this.pageSize,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        //最多信息条数赋值
        this.total=res.data.total
        // this.pages=res.data.pages
        console.log(this.tableData, "tabledata",this.total,'total');
      });
    },
  },
  created() {
    this.getData(1);
    this.$axios({
            method: "post",
            url: "http://wish.byesame.com/login",
            data: {
              userName: 'admin',
              passWord: 123456,
            },
          }).then((res)=>{
            console.log(res)
          })
  },
};
</script>

<style lang="scss" scoped>
.page {
  text-align: center;
}
</style>